<!--选项类型组件-->
<template>
  <div class="choose-menu">
    <div class="name">{{ title }}</div>
    <div class="menu-options">
      <el-select v-model="optionsValue" size="small" @visible-change="reset">
        <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { OPTION_DEFAULT, REQUIRED_TYPE, MODULE_TYPE } from "@/utils/mockConfiguration/mockConfig";
import { useTemplateEditing } from "@/store/modules/templateEditing";

const { QUESTION_MODULE } = MODULE_TYPE;
const templateEditing = useTemplateEditing();
const { templatePage } = storeToRefs(templateEditing);
const props = defineProps({
  title: {
    type: String,
    required: true,
  }, //标题
  options: {
    type: Array,
    required: true,
  }, //选项
});
//选项值
const optionsValue = defineModel("value", {
  type: String,
  required: true,
});
//最多可选值
const selectMaxNum = defineModel("selectMaxNum", {
  type: Number,
  required: false,
  default: null,
});
/**
 * 重置选项
 */
const reset = () => {
  const data = optionsValue.value;
  if (data === "radio") {
    selectMaxNum.value = OPTION_DEFAULT;
  }
  //加载本地数据的必填星号
  templatePage.value
    .filter(filterItem => QUESTION_MODULE.includes(filterItem.moduleId))
    .forEach(({ businessData }) => (businessData.required = businessData.selectRule === REQUIRED_TYPE));
};
</script>

<style scoped lang="less">
//选项类型
.choose-menu {
  display: flex;
  justify-content: space-between;
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  :deep(.el-select) {
    width: 200px;
    height: @InputHeight;
    .el-select__selected-item.el-select__placeholder {
      font-size: 14px;
    }
    .el-select__wrapper {
      min-height: @InputHeight;
    }
  }
}
</style>
